Skip to content

Conversation

@bvaughn
Copy link
Owner

@bvaughn bvaughn commented Aug 8, 2025

User facing changes

  • More ergonomic props API
  • Auto-memoizing for row/cell renderer and additional context props
  • Automatically sizing for List and Grid (aka no more AutoSizer)
  • Native TypeScript support (aka no more @types/react-window)
  • Smaller bundle size
  • All new website/documentation (preview)

Pre-release testing via NPM

npm install react-window@alpha

Known issues with latest alpha (2.0.0-alpha.7)

  • Grid may not account for scrollbars spaces when scrolling in some cases

@vercel
Copy link

vercel bot commented Aug 10, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
react-window Ready Ready Preview Comment Aug 28, 2025 11:24pm

@jurerotar
Copy link

Awesome, thank you! 🎉

Just to let you know, I've started hitting a couple of Error: Maximum update depth exceeded after adding useGridCallbackRefs. I'm sure it's something I'm doing wrong, and I'll investigate this in the morning.

I'm linking the (unfinished) migration PR in case you decide to take a look: https://github.com/jurerotar/Pillage-First-Ask-Questions-Later/pull/85/files#diff-8673c44e118179393fafa3d2a592a98c16dfbfe81c15ad1165491687db724423

Thank you again for your time answering my questions, really appreciate it!

@bvaughn
Copy link
Owner Author

bvaughn commented Aug 25, 2025

I've started hitting a couple of Error: Maximum update depth exceeded after adding useGridCallbackRefs.

My guess is that you're passing something unstable to rowProps (or cellProps)

I wonder if there's a way I can detect and help make that more obvious (at least in DEV mode) 🤔

@smoores-dev
Copy link

smoores-dev commented Aug 26, 2025

Something goofy is happening with the types for onResize on the List component!

image

It looks like because it's being intersected with HTMLAttributes<HTMLDivElement>, Typescript unioning the argument types for the methods. You may need to do something like Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> to avoid that!

@bvaughn
Copy link
Owner Author

bvaughn commented Aug 26, 2025

@smoores-dev Yeah, sorry. That is one of the things listed as "known issues" with the current release (in the PR description). Hoping to push out the next alpha with that and a few other things (like RTL support) soon.

@smoores-dev
Copy link

Ah, whoops, sorry for missing that! All good!

@jurerotar
Copy link

My guess is that you're passing something unstable to rowProps (or cellProps)

Struggling a bit with this. I think it might be an issue with useGridCallbackRef, because removing the gridRef prop resolves the maximum update depth, regardless of the props passed. Here's my current code, I tried following the docs:

const [xAxisMapRulerRef, setXAxisMapRulerRef] = useGridCallbackRef(null);
const xAxisMapRulerProps = useRef<MapRulerCellProps>({ layout: 'horizontal' });

<Grid<MapRulerCellProps>
  className="scrollbar-hidden"
  gridRef={setXAxisMapRulerRef}
  columnCount={gridSize}
  columnWidth={tileSize}
  rowCount={1}
  rowHeight={20}
  cellProps={xAxisMapRulerProps.current}
  cellComponent={MapRulerCell}
/>

Removing the gridRef makes the issue go away. Might it be something with how useGridCallbackRef is defined? It's currently just an asserted useState.

Doing it like this;

  const xAxisMapRulerRef = useRef<GridImperativeAPI | null>(null);

  const setXAxisMapRulerRef = useCallback((node: GridImperativeAPI) => {
    if (node === null) {
      return;
    }
    xAxisMapRulerRef.current = node;
  }, []);

works though.

Would it make sense for useGridCallbackRef be defined as:

export const useGridCallbackRef = (): [ref: GridImperativeAPI | null,  setRef: (node: GridImperativeAPI) => void] => {
  const ref = useRef<GridImperativeAPI | null>(null);

  const setRef = useCallback((node: GridImperativeAPI) => {
    if (node === null) {
      return;
    }
    ref.current = node;
  }, []);

  return [
    ref.current,
    setRef,
  ]
};

You'd then use it like this:

const [xAxisMapRulerRef, setXAxisMapRulerRef] = useGridCallbackRef();

Second, would it make sense for cellProps to be optional? They're currently required, but their description says Additional props to be passed to the cellComponent, which may imply them being optional. I currently only require columnIndex and rowIndex in my cellComponent, which are added automatically, but I still have to set cellProps to satisfy the type restriction.

@bvaughn
Copy link
Owner Author

bvaughn commented Aug 26, 2025

@jurerotar The problem is that the callback form of Grid ref gets updated whenever the cellProps change, because of how memoization is wired up for that component at the moment. That will be fixed in the next alpha release though!

Second, would it make sense for cellProps to be optional?

As for this, they're currently required for two reasons:

  1. In my experience, they're almost always needed (and in the very rare case they aren't you can just pass an empty object, {})
  2. I had trouble getting the TypeScript generics right for the component if I made them optional 😅

@jurerotar
Copy link

Awesome, thank you very much! Looking forward to continuing testing v2 after the next alpha release!

Thanks again for your work!

@bvaughn
Copy link
Owner Author

bvaughn commented Aug 27, 2025

Version [email protected] just published. Only known issues have to do with Grid RTL and minor scrollbar size alignment issues (both listed in the PR description). I'll try to publish [email protected] tomorrow or soon, but wanted to push out a few other fixes in the meantime.

@jurerotar and @smoores-dev This should fix the memoization cycle you mentioned.

@bvaughn
Copy link
Owner Author

bvaughn commented Aug 28, 2025

Just published version 2.0.0-alpha.7 with RTL support for Grid; docs updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants